import { Button, DatePicker, message, Modal, Radio, Select, Checkbox, InputNumber, } from "antd";
import { connect } from "dva";
import moment from "moment";
import React from "react";
import enums from "./enums";
import styles from "./index.less";

const { Option } = Select;

@connect((state) => ({
  creditCar: state.creditCar,
}))
export default class BacthChangeStateModal extends React.PureComponent {
  state = {
    repaymentStatus: undefined,
    financeStartDate: undefined,
    financeTerm: undefined,
    overdueDate: undefined,
    submitBntLading: false,
    checked: [],
    showDate: false,
  };

  componentDidMount() {
    const { bacthChangeStateModalData } = this.props;
  }

  handleSubmit = (msg) => {
    const { changeBacthChangeStateModalVisible, bacthChangeStateModalData } =
      this.props;
    const { repaymentStatus, overdueDate,financeStartDate,financeTerm,checked  } = this.state;
  
    let repaymentList = {
      vin: bacthChangeStateModalData,
    };
    if(checked.length == 0){
      message.error("请选择修改项");
      return;
    }
    if(checked.includes(1)){
      if(!financeStartDate){
        message.error("请填写完整融资起始日");
        return;
      }else{
        repaymentList.financeStartDate = moment(financeStartDate).format(
          "YYYY-MM-DD"
        );
      }
    }
    if(checked.includes(2)){
      if(!financeTerm){
        message.error("请填写完整融资期限");
        return;
      }else{
        repaymentList.financeTerm = financeTerm
      }
    }
    if(checked.includes(3)){
      if(!repaymentStatus){
        message.error("请选择还款状态");
        return;
      }else{
        repaymentList.repayStatus = repaymentStatus
      }
    }
    // if(checked.includes(4)){
    //   if(!overdueDate){
    //     message.error("请选择逾期开始日期");
    //     return;
    //   }else{
    //     repaymentList.overdueDate = moment(overdueDate).format(
    //       "YYYY-MM-DD"
    //     );
    //   }
    // }

    if (checked.includes(3) && repaymentStatus === enums.repaymentStatus.overdue.value) {
      if (!overdueDate) {
        message.error("还款状态为”已逾期“，逾期开始日不能为空");
        return;
      } else {
        repaymentList.overdueDate = moment(overdueDate).format(
          "YYYY-MM-DD"
        );
      }
    }
    const list = []
    bacthChangeStateModalData.map((item)=>{
     list.push({"vin":item,"repayStatus":repaymentList.repayStatus,"overdueDate":repaymentList.overdueDate,"financeStartDate":repaymentList.financeStartDate,"financeTerm":repaymentList.financeTerm}) 
    })
    //TODO:请求接口
    this.setState({
      submitBntLading: true,
    });
    this.props.dispatch({
      type: "creditCar/postListList",
      payload: {
        url: "/mscreditbusiness/vehicle/credit/update/repayStatus/batch",
        list
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          message.success("修改状态成功");
          changeBacthChangeStateModalVisible(true);
        } else {
          // message.error(response.statusMessage);
        }
        this.setState({
          submitBntLading: false,
        });
      },
    });
  };

  render() {
    const { submitBntLading, repaymentStatus, overdueDate,financeStartDate, financeTerm, showDate } = this.state;

    const { changeBacthChangeStateModalVisible } = this.props;
    const disabledDate = (current) => {
      return current && (current < moment().year(1969).month(11).date(31) || current > moment().endOf("day"));
    };
    return (
      <Modal
        title="批量修改授信车辆"
        onCancel={() => changeBacthChangeStateModalVisible(false)}
        visible={true}
        footer={[
          <Button
            key="back"
            type="ghost"
            onClick={() => changeBacthChangeStateModalVisible(false)}
          >
            取 消
          </Button>,
          <Button
            key="submit"
            type="primary"
            loading={submitBntLading}
            onClick={() => this.handleSubmit("submit")}
          >
            提 交
          </Button>,
        ]}
      >
        <div className={styles.bacthChangeState}>
        <Checkbox.Group 
        onChange={(e)=>{
          this.setState({
              checked: e
           })
        }}> 
          <div className={styles.publicItem}>
          <Checkbox value={1}>
            融资起始日&nbsp;&nbsp;
            <DatePicker
                  // disabledDate={(current) => {
                  //   return current && current > moment().endOf("day");
                  // }}
                  disabledDate={disabledDate}
                  onChange={(e) => {
                    this.setState({
                      financeStartDate: e,
                    });
                  }}
                  placeholder={"请选择融资起始日"}
                />
          </Checkbox>
          </div>
          <div className={styles.publicItem}>
          <Checkbox value={2}>
            融资期限(月)&nbsp;&nbsp;
            <InputNumber 
                style={{width: '50%'}}
                min={0} 
                max={9999}
                placeholder={"请填写融资期限"} 
                onChange={(e) => {
                  this.setState({
                    financeTerm: e,
                  });
                }}
                />
          </Checkbox>
          </div>
          <div className={styles.publicItem}>
          <Checkbox value={3}>
            还款状态&nbsp;&nbsp;
            <Radio.Group
                onChange={(e) => {
                  this.setState({
                    repaymentStatus: e.target.value,
                    overdueDate: undefined,
                  });
                  if(e.target.value == '1'){
                    this.setState({
                      showDate: true
                    })
                  }else{
                    this.setState({
                      showDate: false
                    })
                  }
                }}
              >
                {enums.repaymentStatus.array.map((radio) => {
                  if (radio.value !== enums.repaymentStatus.expire.value) {
                    return (
                      <Radio key={radio.value} value={radio.value}>
                        {radio.label}
                      </Radio>
                    );
                  }
                })}
              </Radio.Group>
          </Checkbox>
          </div>
          {showDate && (
          <div className={styles.publicItem}>
          {/* <Checkbox value={4}> */}
          <div style={{width: '24px', height: '16px', display: 'inline-block'}}></div>逾期开始日&nbsp;&nbsp;
            <DatePicker
                   disabledDate={disabledDate}
                  // disabledDate={(current) => {
                  //   return current && current > moment().endOf("day");
                  // }}
                  value={overdueDate}
                  onChange={(e) => {
                    this.setState({
                      overdueDate: e,
                    });
                  }}
                  placeholder={"请选择逾期起始日"}
                />
          {/* </Checkbox> */}
          </div>
          )}
          </Checkbox.Group>
        </div>
      </Modal>
    );
  }
}
